<template>
  <div>
    <h1>订单处理</h1>
    <el-row>
      <el-col :span="20" :push='2'>
        <div>
          <el-form :inline="true">
            <el-form-item style="float: left" label="查询订单信息:">
              <el-input v-model="search" placeholder="查询所需要的内容......"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-table
            :data="tables.slice((page-1)*pageSize,page*pageSize)"
            border
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="160">
            </el-table-column>
            <el-table-column
              label="订单编号"
              align="center"
              width="220px">
              <template slot-scope="scope">
                <span>{{scope.row.id}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="广告位编号"
              align="center"
              width="180px">
              <template slot-scope="scope">
                <span>{{scope.row.spotId}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="顾客编号"
              align="center"
              width="220px">
              <template slot-scope="scope">
                <span>{{scope.row.customerId}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="预定开始时间"
              align="center"
              width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.startDate}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="预定到期时间"
              align="center"
              width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.endDate}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单状态"
              align="center"
              width="160px">
              <template slot-scope="scope">
                <span>{{scope.row.status}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="220">
              <template slot-scope="scope">
                <el-button
                  size="mini" v-if="scope.row.status==='待审核'" @click = "handleApproval(scope.row)" type="primary">通过
                </el-button>
                <el-button
                  size="mini" v-if="scope.row.status==='待派发'" @click = "handleDistribute(scope.row)" type="primary">派发任务
                </el-button>
                <el-button
                  size="mini" v-if="scope.row.status!=='待派发'&& scope.row.status!=='待审核'" disabled type="primary">派发任务
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24" class="el-table_footstool">
            <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]" :page-size="pageSize" :total="tables.length" style="float:right;">
            </el-pagination>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import orderApi from '@/api/spot/order'
export default {
  name: 'dealOrder',
  data () {
    return {
      accountId: this.$store.state.accountId, // 当前登陆的用户id
      role: this.$store.state.role, // 用户角色
      order: {
        customerId: '', // 顾客id
        endDate: '', // 预定结束时间
        id: '', // 订单编号
        sellId: this.$store.state.accountId, // 业务员编号
        spotId: '', // 广告位编号
        startDate: '', // 预定开始时间
        status: '', // 订单状态
        workOrderId: '', // 工单编号
        contractId: '' // 合同编号
      },
      orders: [], // 要处理的订单列表
      search: '', // 搜索关键词
      page: 1, // 页号
      pageSize: 10 // 页面显示的最大数据量
    }
  },
  computed: {
    // 模糊搜索
    tables () {
      const search = this.search
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
        return this.orders.filter(data => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          return Object.keys(data).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.orders
    }
  },
  methods: {
    /**
     * 通过调用api获取要处理的订单列表
     */
    getAllOrderList () {
      orderApi.getAllOrderList().then(res => {
        this.orders = res.data
      })
    },
    /**
     * 通过按钮点击事件，将当前行数数据赋给订单对象，通过调用api来改变对应的状态并更新订单列表
     * @param row 当前行
     */
    handleApproval (row) {
      this.order.customerId = row.customerId
      this.order.endDate = row.endDate
      this.order.id = row.id
      this.order.spotId = row.spotId
      this.order.startDate = row.startDate
      this.order.workOrderId = row.workOrderId
      this.order.status = row.status
      orderApi.confirmOrder(this.order).then(res => {
        this.$message({
          type: 'success',
          message: '生成合同成功'
        })
        this.getAllOrderList()
      }
      )
    },
    /**
     * 通过派发任务按钮点击事件，将当前行数数据赋给订单对象，通过调用api来改变对应的状态并更新订单列表
     * @param row 当前行
     */
    handleDistribute (row) {
      this.order.contractId = row.contractId
      this.order.customerId = row.customerId
      this.order.endDate = row.endDate
      this.order.id = row.id
      this.order.spotId = row.spotId
      this.order.startDate = row.startDate
      this.order.status = row.status
      this.order.workOrderId = row.workOrderId
      orderApi.assignTask(this.order).then(res => {
        this.$message({
          type: 'success',
          message: '派单成功'
        })
        this.getAllOrderList()
      })
    },
    // 初始页page、初始每页数据数pageSize和数据data
    handleSizeChange (size) {
      this.pageSize = size
    },
    handleCurrentChange (val) {
      this.page = val
    }
  },
  /**
   * 创建页面时获取要处理的订单列表
   */
  created () {
    this.getAllOrderList()
  }
}
</script>

<style scoped>

</style>
